/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */

/* 行为相关颜色 */
$primary: #FF4E74;
$primary-dark: #FF4E74;
$primary-light: #d6f7ff;
$primary-number: #FF4E74;
$primary-line: #2678be;
$assist: #ff6039;
$assist-dark: #e74e28;
$assist-light: #ffe8df;

$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #ff160d;



/*字体颜色配置*/
$font-ha: #303133;
$font-hb: #606266;
$font-hc: #b0b3b9;
$font-hd: #C0C4CC;
$font-disabled: rgba(206, 206, 206, 0.6);
$font-placeholder: #808080;

/*边框颜色配置*/
$border-ba: #DCDFE6;
$border-bb: #E4E7ED;
$border-bc: #EBEEF5;
$border-bd: #F2F6FC;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
$bg-page:#f8f8f8;
$bg-hover: #f3f3f3;

/* 边框颜色 */
$uni-border-color:#c8c7cc;
$uni-navbar-border-color:#e2e1e6;

/* 尺寸变量 */

/* 文字尺寸 */
$font-size-xm:11px;
$font-size-sm:13px;
$font-size-base:15px;
$font-size-lg: 17px;

/* 图片尺寸 */
$uni-img-size-sm:40upx;
$uni-img-size-base:52upx;
$uni-img-size-lg:80upx;

/* Border Radius */
$uni-border-radius-sm: 4upx;
$uni-border-radius-base: 6upx;
$uni-border-radius-lg: 12upx;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20upx;
$uni-spacing-row-lg: 30upx;

/* 垂直间距 */
$pacing-col-sm: 10rpx;
$spacing-col-base: 20rpx;
$spacing-col-lg: 28rpx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40upx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36upx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30upx;

/* 页面边距  */
$page-padding: 10px;
.overSpace {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


button {
  line-height: 1;
  white-space: nowrap;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 0 !important;
  font-size: 16px;
  overflow: inherit !important;
  border: 0;
  display: block;
  cursor: pointer;
  position: relative;
  line-height: 24px;
  border-radius: 100px;
  line-height: 40px;
  height: 40px;

  &[full] {
    width: 100%;
  }

  &[type=primary] {
    background: $primary;
    color: #fff;
  }

  &[type=primary]:active {
    background-image: linear-gradient(to right, $primary, $primary-number);
  }

  &[type=danger] {
    background-image: linear-gradient(to right, #eb4554, #ffa068);
    color: #fff;
  }

  &[type=assist] {
    background-image: linear-gradient(to right, $assist-dark, $assist);
    color: #fff;
  }

  &[type=assist]:active  {
    background-image: linear-gradient(to right, $assist, $assist);
    color: #fff;
  }

  &[disabled] {
    opacity: 0.2;
  }

  &:after {
    border: 0;
    content: '';
  }
}

.allTrans {
  transition: all .5s;
  -moz-transition: all .5s; /* Firefox 4 */
  -webkit-transition: all .5s; /* Safari 和 Chrome */
  -o-transition: all .5s; /* Opera */
}


.shadow-blur::before {
  content: "";
  display: block;
  background: inherit;
  filter: blur(10px);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 5px;
  left: 5px;
  z-index: -1;
  opacity: 0.4;
  transform-origin: 0 0;
  border-radius: inherit;
  transform: scale(1, 1);
}

.is-fixBtn {
  width: calc(100% - 20px) !important;
  position: fixed;
  bottom: 10px;
  left: 10px;
}

.sa_form {
  width: calc(100% - 20px);
  padding: 0 10px;
  background: #fff;

  .sa_form_span {
    width: 100%;
    text-align: left;
    margin-bottom: 20px;

    .sa_form_title {
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      color: #000;
      padding-left: 5px;
      margin-bottom: 10px;
      font-weight: bold;
    }

    .sa_form_input {
      width: 100%;
      position: relative;


      .after{
        position: absolute;
        right: 0;
        top: 1px;
        height: calc(100% - 2px);
        display: flex;
        align-items: center;
        background-color: $bg-page;
        padding: 0 10px;
        font-size: $font-size-base;
        color: $font-hb;
        border-left: 1px solid $border-bd;
      }

      .sa_form_input_li{
        width: 100%;
        position: relative;

        .after{
          position: absolute;
          right: 0;
          top: 1px;
          height: calc(100% - 2px);
          display: flex;
          align-items: center;
          background-color: $bg-page;
          padding: 0 10px;
          font-size: $font-size-base;
          color: $font-hb;
          border-left: 1px solid $border-bd;
        }
      }

      &.checkbox {
        display: flex;
        justify-content: space-between;

        .checkbox_span {
          &.col_2 {
            width: calc(50% - 10px);
          }

          &.col_3 {
            width: calc(33% - 10px);
          }
        }
      }

      .checkbox_span {
        height: 30px;
        line-height: 30px;
        background: $bg-page;
        text-align: center;
        font-size: 14px;
        border-radius: 2px;
        color: $font-hb;
        position: relative;

        &.is-active {
          color: $primary-number;
        }

        &.is-active:after {
          content: '\e637';
          font-family: 'iconfont';
          position: absolute;
          right: 0;
          bottom: 0;
          color: $primary-number;
          font-size: 18px;
          line-height: 19px;
        }
      }

      textarea,
      input {
        width: calc(100% - 20px);
        padding: 10px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid $border-bc;
        font-size: 12px;
        margin-bottom: 10px;
      }

      textarea {
        min-height: 80px;
      }

      .selectAddress {
        width: calc(100% - 20px);
        height: 34px;
        line-height: 34px;
        border: 1px solid $border-bc;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        display: flex;
        font-size: 12px;
        padding: 0 10px;
        transition: border-color .5s;
        -moz-transition: border-color .5s; /* Firefox 4 */
        -webkit-transition: border-color .5s; /* Safari 和 Chrome */
        -o-transition: border-color .5s; /* Opera */
        .selectAddress_placeholder,
        .selectAddress_value {
          flex: 1;
          color: $font-hc;
        }

        .selectAddress_value {
          color: $font-ha;
        }

        .selectAddress_icon {
          font-size: 12px;
          color: $font-hd;
        }

        &:active,
        &:focus {
          border-color: $primary-light !important;
        }
      }
    }
  }
}

.is-card {
  width: calc(100% - $page-padding - $page-padding - $page-padding - $page-padding);
  margin-left: $page-padding;
  margin-right: $page-padding;
  padding: $page-padding;
}

.is-panel {
  width: calc(100% - 30px) !important;
  margin-left: 15px;
  margin-right: 15px;
}

.label_panel {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin-top: 5px;

  .label_panel_span {
    font-size: 24rpx;
    color: #b3b3b3;
    border: 1px solid #c3c3c3;
    padding: 0px 4px;
    margin: 0 8rpx 8rpx 0;
    border-radius: 100px !important;
  }
}

.is-mask {
  background: rgba(0, 0, 0, .5);
  width: 100%;
  height: 100%;
}

/* 文章详情 */
.i-article {
  .i-article-span {
    background-color: #fff;
    width: calc(100% - 20px);
    padding: 0 10px;
    margin-bottom: 10px;
    &.two{
      flex-flow: row wrap;
      .i-article-li{
        width: 100%;
      }
    }
    &.ave{
      .i-article-li{
        width: 100%;
        &:nth-child(2n+2){
          width: calc(100% - 140px) !important;
        }
      }
    }

    .i-article-li {
      width: 100%;
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      display: flex;
      border-bottom: 1px dashed $border-bd;
      font-size: $font-size-sm;

      &.full{
        width: 100%;
        padding: 0 !important;
      }
      &:last-child {
        border-bottom: 0;
      }

      .i-article-li_label {
        color: $font-hb;
      }

      .i-article-li_value {
        flex: 1;
        text-align: left;
      }
    }
  }

  .i-article_title {
    width: 100%;
    font-size: 50rpx;
    color: #000;
    padding-top: 10px;
  }

  .i-article_d{
    padding: 7px 0;
    .i-article_d_li{
      padding: 2px 0;
      font-size: $font-size-sm;
      color: $font-hc;
    }
  }

  .i-article_hpanel {
    width: 100%;
    height: 30px;
    display: flex;
    line-height: 30px;
    font-size: $font-size-sm;
    color: $font-hc;
    margin-top: 5px;

    .i-article_hpanel_span {
      margin-right: 10px;
      &.href{
        color: $primary-line;
      }
    }
  }

  .i-article_info {
    width: 100%;
    padding: 10rpx 0;
    font-size: $font-size-sm;
    display: flex;
    flex-flow: row wrap;
    margin: 20rpx 0 10rpx 0;

    &.activity {
      border-radius: 10rpx;
      padding: 10rpx 0px;
      width: 100%;
      margin-bottom: 20rpx;

      .i-article_info_span {
        color: $font-ha;
      }
    }

    .i-article_info_col {
      width: 100%;
      padding: 8rpx 0;
      display: flex;
      flex-flow: row wrap;

      &.avg {
        .i-article_info_span {
          width: 50%;
          margin: 0;
        }
      }
    }

    .i-article_info_span {
      margin-right: 10px;
      color: $primary-number;

      font {
        color: $font-hd;

        &.price {
          color: $assist;
          font-size: $font-size-lg;
        }
      }

      &.time {
        color: $font-hd;
      }
    }
  }

  .i-article_img {
    width: 100%;
    margin-top: 10px;

    image {
      width: 100%;
    }
  }

  .i-article_qr {
    text-align: center;
    display: flex;
    padding: 10px;
    width: calc(100% - 20px);
    box-shadow: 0 0 2px #ddd;
    border-radius: 5px;
    margin:0px 0 20px 0;
    &:active{
      background-color: $bg-hover;
    }
    .i-article_qr_logo{
      width: 70px;
      height: 70px;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .i-article_qr_info{
      flex: 1;
      text-align: left;
      margin-left: 10px;
      .i-article_qr_info_name{
        font-size: $font-size-lg;
        font-weight: bold;
        margin-bottom: 5px;
      }
      .i-article_qr_info_detail{
        font-size: $font-size-sm;
        color: $font-hb;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    .i-article_qr_btn{
      width: auto;
      background-color: $uni-color-success;
      color: #fff;
      height: 24px;
      font-size: $font-size-base;
      padding: 0 5px;
      margin: 23px 0px;
      border-radius: 4px;
      margin-left: 10px;
      line-height: 24px;
    }
  }

  .i-article_detail {
    width: 100%;
    padding: 10px 0 0 0;
    font-size: 14px;
    color: $font-ha;
    line-height: 58rpx;

    ::v-deep​​ img {
      width: 100%;
    }
  }

  .i-article_warn{
    font-size: $font-size-base;
    color: $assist;
    margin: 10px 0;
  }

  .i-article_readCount {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: $font-size-sm;
    color: $font-hc;
    margin: 20px 0 20px 0;
  }

  .i-article_tool {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-bottom: 10px;

    .i-article_tool_span {
      border-radius: 100px;
      padding: 5px 15px;
      border: 1rpx solid $font-hd;
      height: 20px;
      line-height: 20px;
      font-size: $font-size-sm;
      color: $font-hb;
      display: flex;
      flex: 1;
      justify-content: center;
      margin: 0 10px;

      image {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }

      i {
        margin-right: 5px;
      }

      &.ad {
        padding: 5px !important;
      }

      &:active {
        background-color: $bg-hover;
      }
      &.active{
        border-color: $assist;
        color: $assist;
      }
    }
  }

  .i-article_like {
    width: 100%;
    margin: 0px 0 10px 0;

    .uni-article-li {
      padding: 10px 0;
      width: 100%;
    }
  }

  .i-article_placeholder {
    width: 100%;
    height: 60px;
  }

  .i-article_footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid $border-bd;
    background-color: #fff;
    height: 50px;
    line-height: 50px;
    display: flex;

    .i-article_footer_btn {
      flex: 1;
      background: $primary;
      color: #fff;
      text-align: center;
      font-size: $font-size-base;
      margin: 8px 10px;
      line-height: 34px;
      border-radius: 100px;
      background-image: linear-gradient(to right, $primary-number, $primary-line);
      position: relative;

      &.danger {
        background-image: linear-gradient(to right, $assist-light, $assist);
      }

      &.shadow-blur::before {
        filter: blur(3px);
      }

      &:active {
      }

      &.activity {
        height: 34px;
        padding: 8px 0;
        line-height: 17px;
        font-size: $font-size-lg;
        border-radius: 0 !important;
        margin: 0 !important;

        font {
          font-size: $font-size-xm;
        }
      }
    }

    .i-article_footer_icon {
      display: flex;

      &.policyStatus {
        width: 100%;

        .footer_icon_span {
          width: 33.3%;
        }
      }

      .i-article_footer_icon_span {
        width: 60px;
        flex: 1;
        font-size: 50rpx;
        color: $font-hb;
        text-align: center;

        &:active {
          color: $primary;
        }

        &.active {
          color: $assist;
        }
      }
    }
  }
}

.status_bar {
  height: var(--status-bar-height);
  width: 100%;
  color: #000;
  z-index: 100;
  position: relative;
  &.primary {
    background-color: $primary;
  }
  &.trans{
    background: transparent;
  }
}

.nav_bar {
  position: fixed;
  left: 0;
  top: var(--status-bar-height);
  width: 100%;
  height: 44px;
  padding: 7px 3px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  overflow: hidden;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  box-sizing: border-box;
  z-index: 998;
  color: #fff;
  background-color: $primary;
  -webkit-transition-property: all;
  transition-property: all;
  align-content: center;

  &.transparent {
    background-color: transparent !important;
  }

  .nav_bar_back {
    position: relative;
    margin: 0 2px;
    word-break: keep-all;
    white-space: pre;
    cursor: pointer;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 40rpx;
    z-index: 11;
  }

  .nav_bar_title{
    align-items: center;
    display: flex;
  }

  .nav_bar_searchIcon {
    position: absolute;
    width: auto;
    word-break: keep-all;
    white-space: pre;
    cursor: pointer;
    height: 30px;
    width: 40px;
    text-align: center;
    line-height: 30px;
    font-size: 24px;
    z-index: 11;
    right: 0;
  }

  .nav_bar_tab {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    line-height: 44px;

    .nav_bar_tab_span {
      width: auto;
      height: 100%;
      font-size: $font-size-lg;
      color: #e4e4e4;
      margin: 0 10px;

      font {
        z-index: 1;
        position: relative;
      }

      &.active {
        color: #fff;
        font-weight: bold;
        position: relative;
        font-size: 36rpx;
      }
    }
  }

  .nav_bar_logo {
    font-size: 36rpx;
    color: #fff;
    margin: 0 10px;
    line-height: 30px;
    image{
      width: 80px;
      margin: 3px 0;
    }
  }

  .nav_bar_search {
    flex: 1;
    border-radius: 100px;
    background-color: #fff;
    padding-left: 10px;
    font-size: $font-size-base;
    line-height: 30px;
    color: $font-hb;
    margin-right: 10px;
    height: 100%;

    i {
      text-align: center;
      padding-right: 5px;
    }
  }

  .nav_bar_icon {
    width: 35px;
    color: #fff;
    text-align: center;
    color: #fff;
    line-height: 30px;
    font-size: 40rpx;
  }

  .nav_bar_btn{
    color: #fff;
    text-align: center;
    color: #fff;
    line-height: 30px;
    font-size: 14px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    i{
      margin-right: 5px;
    }
  }

  .nav_bar_city{
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-left: 10px;
  }
}


.hasCondition {
  .page_condition {
    width: 100%;
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 11;
    display: flex;
    line-height: 40px;

    .page_condition_span {
      flex: 1;
      text-align: center;
      font-size: $font-size-sm;
      color: $font-ha;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 33.33%;

      .label{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }

      i {
        margin-left: 10rpx;
        font-size: 20rpx;
      }

      &:active {
        background-color: $bg-hover;
      }

      &.active {
        color: $primary-line !important;
      }
    }

    .page_condition_menu {
      width: 100%;
      position: absolute;
      top: 40px;
      left: 0;
      background: #fff;
      overflow: hidden;
      border-top: 1px solid $border-bd;
      border-radius: 5px;

      .page_condition_menu_list {
        width: 100%;
        padding: 20px 0px;
        display: flex;
        flex-flow: row wrap;
        .page_condition_menu_place{
          width: calc(33.33%);
          .page_condition_menu_place_scroll{
            max-height: 300px;
          }
          .page_condition_menu_place_li{
            text-align: center;
            font-size: $font-size-base;
            &.active{
              color:  $primary-line;
            }
          }
        }
        &.scroll{
          height: 300px;
          overflow: auto;
        }
        &.two{
          width: 100%;
          .page_condition_menu_span{
            width:  calc(50% - 10px);
          }
        }

        .page_condition_menu_span {
          width: calc(33.33% - 10px);
          height: 40px;
          line-height: 40px;
          font-size: $font-size-base;
          position: relative;
          text-align: center;
          background-color: $bg-page;
          margin: 0 5px 10px 5px;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          border-radius: 4px;

          &.active {
            background-color: $primary-line;
            color: #fff;
          }

          //&.active:after{
          //	font-family: "iconfont";
          //	content: "\e66d";
          //	position: absolute;
          //	right: 0;
          //	height: 100%;
          //}
        }
      }

      .page_condition_menu_footer {
        width: 100%;
        height: 50px;
        display: flex;
        border-top: 1px solid $border-bd;
        text-align: center;
        line-height: 50px;

        .page_condition_menu_footer_span {
          width: 50%;
          height: 100%;
          font-size: $font-size-lg;

          &.ok {
            background-color: $assist;
            color: #fff;
          }
        }
      }
    }
  }

  .page_list {
    margin-top: 40px;
    z-index: 1;
  }
}

.pageEmpty {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;

  image {
    width: 100%;
    height: 100%;
  }
}

.is-cell-span {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;

  .is-cell {
    width: calc(100% - 20px);
    height: 50px;
    line-height: 50px;
    display: flex;
    padding: 0 10px;
    border-bottom: 1px solid $border-bd;

    &:last-child {
      border-bottom: 0;
    }

    &:active {
      background-color: $bg-hover;
    }

    .is-cell_label {
      font-size: 32rpx;
      position: relative;
      .rot{
        position: absolute;
        top: 15px;
        right: -8px;
        background-color: $assist-light;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;
        width: 8px;
        height: 8px;
      }
    }

    .is-cell_value {
      flex: 1;
      text-align: right;
      margin-right: 10px;
      font-size: $font-size-base;
      color: $font-hb;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      i {
        margin-right: 5px;

        &.success {
          color: $uni-color-success;
          font-size: 22px;
        }
      }
    }

    .is-cell_right {
      font-size: $font-size-sm;
      color: $font-hc;
    }
  }
}

.onSharePanel {
  z-index: 1;

  .onSharePanel_mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1;
  }

  .onSharePanel_center {
    width: calc(100% - 20px);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #fff;
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 2;

    .onSharePanel_center_title {
      width: 100%;
      text-align: center;
      height: 40px;
      font-size: $font-size-lg;
      font-weight: bold;
      line-height: 40px;
    }

    .onSharePanel_center_list {
      width: 100%;
      display: flex;
      padding: 20px 0;

      .onSharePanel_center_list_span {
        width: 50%;
        text-align: center;

        image {
          width: 50px;
          height: 50px;
        }

        .label {
          width: 100%;
          height: 25px;
          line-height: 25px;
          text-align: center;
          font-size: $font-size-sm;
        }

        &:hover {
          background-color: $bg-hover;
        }
      }
    }

    .onSharePanel_center_cancel {
      width: 100%;
      height: 50px;
      line-height: 40px;
      text-align: center;
      font-size: $font-size-lg;
      color: $primary-line;
    }
  }
}

.kindProduct_span_list {
  display: flex !important;
  justify-content: space-between !important;
  flex-flow: row wrap !important;
  margin-top: 20px;

  .kindProduct_span_list_span {
    width: calc(50% - 5px);
    margin-bottom: 10px;
    box-shadow: 0 0 5px 3px #f8f8f8;
    background-color: #fff;

    .kindProduct_span_list_span_img {
      height: calc((100vw - 30px) / 3);
      overflow: hidden;
      position: relative;
      image {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
      }
    }

    .kindProduct_span_list_span_info {
      width: calc(100% - 20px);
      padding: 10px;

      .kindProduct_span_list_span_info_name {
        font-size: $font-size-base;
        color: #000;
        font-weight: bold;
      }

      .kindProduct_span_list_span_info_info {
        font-size: $font-size-sm;
        color: $font-hc;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .kindProduct_span_list_span_info_tip {
        font-size: $font-size-xm;
        margin: 10px 0 0 0;
        display: inline-block;
        padding: 2px 5px;
        border: 1px solid $assist;
        color: $assist;
        border-radius: 4px;
      }

      .kindProduct_span_list_span_info_price {
        width: 100%;
        display: flex;
        margin-top: 10px;
        .marketPrice{
          font-size: $font-size-base;
          font-weight: bold;
          color: $assist;
          font{
            font-size: $font-size-sm;
          }
        }
        .discountPrice{
          color: $font-hc;
          text-decoration: line-through;
          font-size: $font-size-xm;
          margin-left: 10px;
        }
      }
    }
  }
  .kindProduct_span_list_scroll{
    width: 100%;
    height: auto;
    .kindProduct_span_list_scroll_center{
      display: flex;
      padding: 10px 0;
      .kindProduct_span_list_span{
        width: 150px;
        margin: 0 10px 0 0;
        &:last-child{
          margin-left: 0;
        }
      }
    }
  }
}

.ccptiAtaDetailPage{
  width: calc(100% - 20px);
  padding: 10px;
  .ccptiAtaDetailPage_title{
    width: 100%;
    font-size: $font-size-lg;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
  }
  .ccptiAtaDetailPage_detail{
    font-size: $font-size-base;
    color: $font-hb;
    p{
      margin-bottom: 10px;
      text-indent:35px;
      line-height: 24px;
    }
    h4{
      margin-bottom: 5px;
    }
  }
}
.imagePanel{
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    image {
      width: 100%;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
    }
}

.ql-align-right{
  text-align: right !important;
}
.ql-align-center{
  text-align: center !important;
}
.ql-indent-1{
  text-indent: 35px !important;
}


.i-article_detail h1{
  font-size: 24px !important;
}
.i-article_detail h2{
  font-size: 22px !important;
}
.i-article_detail h3{
  font-size: 20px !important;
}
.i-article_detail h4{
  font-size: 18px !important;
}
.i-article_detail h5{
  font-size: 16px !important;
}


.orderStatusFont_-1{
  color: #a9a9a9;
}
.orderStatusFont_0,.orderStatusFont_3{
  color: #fc9e00;
}
.orderStatusFont_1,.orderStatusFont_9,.orderStatusFont_6{
  color: #08d600;
}
.orderStatusFont_4,.orderStatusFont_5{
  color: #eb0700;
}
.orderStatusFont_2{
  color: #dfd600;
}


/* switch */
uni-switch{
  transform: scale(0.8);
}
/* uni-page-head */
.uni-page-head{
  border-bottom: 1px solid $border-bc;
}
page::before{
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 2rpx;
  background-color: #F8F8F8;
  z-index: 9999;
}

.videoPanel{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 1000;
}
video{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
.videoPanel_close{
  width: 50px;
  height: 50px;
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,.5);
  text-align: center;
  line-height: 50px;
  color: #fff;
  border-radius: 100px;
}

.footerBlock{
  width: 100%;
  height: 70px;
}
.footerBtn {
  width: 100%;
  height: 60px;
  &.icons{
    .footerBtn_center{
      width: calc(100% - 20px);
      padding: 0px 10px;
      background: #fff;
      height: 60px;
      bottom: 0;
    }
  }
  .footerBtn_center{
    width: calc(100% - 40px);
    padding: 0px 20px;
    position: fixed;
    bottom: 10px;
    display: flex;
    align-items: center;
    .footerBtn_center_icons{
      flex-shrink: 0;
      display: flex;
      align-items: center;
      margin-right: 10px;
      .footerBtn_icons_span{
        text-align: center;
        color: $font-hb;
        width: 50px;
        &.is-active{
          color: $assist;
        }
        &:active{
          background: $bg-hover;
        }
        .footerBtn_icons_span_icon{
          height: 24px;
          line-height: 18px;
          font-weight: bold;
          font-size: 22px;
          margin: 0;
        }
        .footerBtn_icons_span_label{
          font-size: 12px;
        }
      }
    }
    .footerBtn_center_btn {
      width: 100%;
      border-radius: 100px !important;
    }
  }
}

.tipsSpan{
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  &.red{
    background: #fff4f4;
    color: #ff3030;
  }
  &.full{
    &.vip{
      background: #282727 !important;
      color: #ffd1b4 !important;
    }
  }
  &.city{
    font-size: 8px;
  }
}
.men{
  color: $uni-color-success;
}
.women{
  color: $uni-color-error;
}

.btn_plain_red{
  border: 1px solid $assist-dark;
  color: $assist-dark;
  &:active{
    background: $assist-dark;
    color: #fff;
  }
}
.btn_plain_green{
  border: 1px solid $uni-color-success;
  color: $uni-color-success;
  &:active{
    background: $uni-color-success;
    color: #fff;
  }
}
